<template>
	<div class="table-div">
		<div class="table-panel">
			<el-input
				v-model="search.categoryName"
				placeholder="关键字查询"
				class="filter-item"
				@keyup.enter.native="initTableData"
			/>
			<el-button plain type="primary" icon="el-icon-plus" @click="addModel()">新增</el-button>
		</div>
		<el-table
			ref="list"
			:data="tableData.list"
			style="width: 100%; margin-top: 10px"
			border
			stripe
			highlight-current-row
			
		>
			<el-table-column property="categoryId" label="种类编号" width="120" align="center"></el-table-column>
			<el-table-column property="categoryName" label="商品种类" align="center"></el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button
						plain
						icon="el-icon-edit"
						type="primary"
						title="编辑"
						size="small"
						@click="editModel(scope.row)"
					>编辑</el-button>
					<el-button
						plain
						icon="el-icon-delete"
						type="danger"
						title="删除"
						size="small"
						@click="deleteModel(scope.row)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- model 编辑框 -->
				<CategoryEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></CategoryEdit>
		
				<!-- 
		            分页
		            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
		            @emitPageData ---- 子组件 $emit 函数定义的 key
		            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
		        -->
				<Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
			</div>
		</template>
		<script>
		import Pagination from "@/components/fragments/Pagination.vue";
		import CategoryEdit from "@/components/product/CategoryEdit.vue";
		
		export default {
			name: "Category",
			components: {
				Pagination,
				CategoryEdit
			},
			data: function () {
				return {
					// 查询参数
					search: {
						currentPage: 1,
						pageSize: 5,
						categoryName: "",
						// sort: "id",
						// direction: "desc",
					},
					// 表格数据结构，参考 PageInfo
					tableData: {
						total: 20, // 总数据量
						pageNum: 1, // 当前页
						pageSize: 5, // 页长
						pages: 1, // 总页数
						list: this.$TestData.usersData, // 当前页数据集合
					},
					// 编辑新增窗口数据
					dialogData: {
						categoryId: 0,
						// 是否显示编辑窗口
						showDialog: false,
					},
				};
			},
			methods: {
			// 初始化表格数据
			initTableData: function () {
				this.$Request
					.fetch_("/api/category/selectCategoryAll","post",this.search)
					.then((result) => {
						console.log(result);
						var newResult = result.data;
						this.tableData.list = newResult.records;
						this.tableData.total = newResult.total;
						this.tableData.pages = newResult.pages;
						this.tableData.pageNum = newResult.current;
						this.tableData.pageSize = newResult.size;
					})
					.catch((error) => {
						this.$message.error(error);
					});
				},
				// 接收分页组件 $emit 函数传递的值
				receivePageData: function (pageData) {
					this.search.currentPage = pageData.pageNum;
					this.search.pageSize = pageData.pageSize;
					this.initTableData();
				},
				// 自定义排序函数
				// changeSort: function (obj) {
				// 	this.search.sort = this.$Common.camecaseToLine(obj.prop);
				// 	this.search.direction = obj.order == "descending" ? "desc" : "asc";
				// 	this.initTableData();
				// },
				// 接收编辑组件 $emit 函数传递的值
				receiveDialogData: function (showDialog) {
					this.dialogData.showDialog = showDialog;
					if (this.dialogData.categoryId == 0) {
						this.search.currentPage = 1;
					} else {
						this.search.currentPage = this.tableData.pageNum;
					}
					this.initTableData();
				},
				// 新增 model
				addModel: function () {
					this.dialogData = {
						categoryId: 0,
						showDialog: true,
					};
				},
				// 编辑 model
				editModel: function (row) {
					//console.log(row);
					this.dialogData = {
						categoryId: row.categoryId,
						showDialog: true,
					};
				},
				// 删除功能
				deleteModel: function (row) {
				//console.log(row);
				this.$confirm("确定要删除当前行吗？", "删除", {
					comfirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
					var url = "/api/category/delete/" + row.categoryId;
					this.$Request
						.fetch_(url, "delete", {})
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$message({
									message: result.msg,
									type: "success",
									duration: 2 * 1000,
								});
								this.search.currentPage = 1;
								this.initTableData();
							} else {
								this.$message.error(result.msg);
							}
						})
						.catch((error) => {
							this.$message.error(error);
						});
					})
				},
			},
			mounted() {
				this.initTableData();
			},
		};
		</script>
		<style>
		.table-div {
			margin-top: 10px;
		}
		.filter-item {
			float: right;
			width: 200px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			/* margin-right: 5px; */
		}
		.button-item {
			float: left;
			width: 100px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			margin-right: 5px;
		}
		</style>